<script lang="ts" setup>
// 组件
import tabs from "./components/tabs/index.vue";
import actionBar from "./components/actionBar/index.vue";
import canvasG6 from "./components/canvasG6/index.vue";

// Store
import { useKBStoreHook } from "@/stores/modules/KB";
import { useCanvasStoreHook } from "@/stores/modules/canvas/index";
import { ElMessageBox } from "element-plus";
import { emitter } from "@/utils/mitt"; // 组件通讯

const useKBStore = useKBStoreHook();
const useCanvasStore = useCanvasStoreHook();
// 接口获取所有 tags，存储到本地中，组件内通用
useKBStore.fetchTags();
useKBStore.fetchTyperel();

const canvasG6Ref = ref(null);
const canvas = computed(() => useCanvasStore.canvas); // 画布集合,遍历渲染标签页

onBeforeRouteLeave((to, form, next) => {
  let haveUndo = canvasG6Ref.value.graph.value.getUndoStack().linkedList.head;
  let graphIsEdit = sessionStorage.getItem("graphIsEdit"); // 标记是否有未保存的数据

  if ((haveUndo || graphIsEdit) && canvas.value.length > 0) {
    // *** 此处必须要加延迟执行、不加的话点击浏览器按钮时会存在问题，弹框一闪而过，
    // 页面没有变，但是地址已经变了
    setTimeout(() => {
      ElMessageBox({
        title: "提示",
        message: `
            <div style="min-height: 50px; line-height: 22px;">
            <i class="el-icon-warning" style="color: rgb(90, 164, 255); font-size: 20px; vertical-align: middle;"></i>
            <span style="color: rgb(48, 49, 51);">您在画布中编辑了未保存，是否确认离开</span>
          </div>
          `,
        showCancelButton: true,
        dangerouslyUseHTMLString: true,
        // type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          // 正常跳转
          next();
          sessionStorage.removeItem("graphIsEdit"); // 标记是否有未保存的数据
          useCanvasStore.closeAllCanvas(); // 关闭所以标签页
        })
        .catch(() => {
          // 如果取消跳转地址栏会变化，这时保持地址栏不变
          next(false);
        });
    }, 100);
  } else {
    next();
    sessionStorage.removeItem("graphIsEdit"); // 标记是否有未保存的数据
    useCanvasStore.closeAllCanvas(); // 关闭所以标签页
  }
});

onUnmounted(() => {
  emitter.off("handleSave");
  emitter.off("handleRelationshipExpansion");
  emitter.off("handleExportImage");
  emitter.off("handleExportData");
  emitter.off("handleSelect");
  emitter.off("handleAllSelect");
  emitter.off("handleInvert");
  emitter.off("handleFiltersEdges");
  emitter.off("handleFiltersNodes");
  emitter.off("handleChangeLayout");
  emitter.off("lockChangeEvent");
  emitter.off("handleDeleteObject");
  emitter.off("leianEvent");
  emitter.off("dimensionEvent");
  emitter.off("handleImport");
  emitter.off("communityDetection");
});
</script>
<template>
  <div class="canvas-main">
    <!--    标签页组件部分-->
    <tabs></tabs>

    <!--    操作栏组件部分-->
    <actionBar></actionBar>

    <!--    画布部分-->
    <canvasG6 ref="canvasG6Ref"></canvasG6>
  </div>
</template>
<style lang="scss" scoped>
.canvas-main {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  overflow: hidden;
}
</style>
